<template>
  <div>
    <van-swipe>
      <van-swipe-item touchable>
        <template #default>
          <van-grid square :border="false">
            <van-grid-item v-for="value in FoodDat" :key="value.id" :icon="'//fuss10.elemecdn.com'+value.image_url" :text="value.title" @click="ranGet(value)" />
          </van-grid>
        </template>
      </van-swipe-item>
      <van-swipe-item touchable>
        <template #default>
          <van-grid square :border="false">
            <van-grid-item v-for="value in FoodDate" :key="value.id" :icon="'//fuss10.elemecdn.com'+value.image_url" :text="value.title" @click="ranGet(value)" />
          </van-grid>
        </template>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  computed: {
    ...mapGetters(['FoodDate', 'FoodDat'])
  },
  methods: {
    //将点击的title存主到sessionStorage并跳转至foodd页面
    ranGet(item) {
      window.sessionStorage.setItem('StoreDatatitle', item.title)
      this.$router.push('/food')
    }
  }
  //此时最新数据已经渲染完毕
  // updated() {
  //   //创建 一个swiper实例对象，来实现轮播
  //   new Swiper('.swiper-container', {
  //     loop: true, // 循环模式选项
  //     // 如果需要分页器
  //     pagination: {
  //       el: '.swiper-pagination'
  //     }
  //   })
  // }
}
</script>

<style lang="less" scoped>
</style>